<template>
<div class="bg-white">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <div class="login-box">
    <div class="logo-img">
      <img src="~images/logo/logo.jpg">
      <div class="name">透明 · 智慧 · 共享</div>
    </div>
    <div class="login-wrap">
      <div class="login-form" :class="{'focus-line':nameFocus}">
        <input type="tel" placeholder="请输入账号" 
               @focus="nameFocus=true" 
               @blur="nameFocus=false"
               @keyup.enter="userLogin"
               v-model.trim="username"></div>
      <div class="login-form" :class="{'focus-line':pwFocus}">
        <input type="password" placeholder="请输入密码"
               @focus="pwFocus=true" 
               @blur="pwFocus=false"
               @keyup.enter="userLogin"
               v-model.trim="password"></div>
      <div class="login-forget cf"><div class="f-r" @click="forget">忘记密码</div></div>
      <div class="login-btn" @click="userLogin">登 录</div>
      <div class="login-vision">版本号：v1.02</div>
    </div>
  </div>
  <div class="login-footer"></div>
</div>
</template>
<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      password:'',
      username:'',
      showLoad:false,
      autoLogin:false,
      nameFocus:false,
      pwFocus:false
    };
  },
  watch: {

  },
  computed: {
    userInfo(){
      return localStorage.UserInfo?JSON.parse(localStorage.UserInfo):'';
    },
    code() {
      return localStorage.wechatCode ? localStorage.wechatCode :'';
    }
  },
  created() {
    if(this.userInfo && this.userInfo != '')
    {
      this.autoLogin = true;
      this.showLoad = true;
      this.username = this.userInfo.logonuser;
      this.password = '******';
      let data = {
        "username" : this.userInfo.logonuser,
        "password" : this.userInfo.key, //需要返回密码给我
        "IsAutoLogin" : true,
        "webchatcode": this.code
      }
      this.doLigin(data);
    }
  },
  methods:{
    forget(){
      this.$router.push({
        path:'forget'
      })
    },
    userLogin(){
      var reg = /^1[345789]\d{9}$/;
      if (this.username == "" || !this.username) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请填写账号"
        });
        return false;
      } else if (!reg.test(this.username)) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请填写正确账号"
        });
        return false;
      };
      if (!this.password) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请填写密码"
        });
        return false;
      }
      this.showLoad = true;
      let data = {
              "username": this.username,
              "password": this.password,
              "webchatcode": this.code
          },
          _this = this;

      this.Ajax.post('UserService/UserLogin',data).then(function(resp) {
        _this.showLoad = false;
        if(resp.code == 'SUCC'){
          localStorage.removeItem("wechatCode");
          localStorage.UserInfo = resp.data;
          _this.$router.push({
            path:'index'
          })
        }else{
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        }
      });
    },
    doLigin(data){
      this.Ajax.post('UserService/UserLogin', data).then((resp) => {
        this.showLoad = false;
        if(resp.code == 'SUCC')
        {
          localStorage.removeItem("wechatCode");
          localStorage.UserInfo = resp.data;
          this.$router.push({
            path:'index'
          })
        }
        else
        {
          // this.username = '';
          this.password = '';
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        }
      });
    }
  }
};
</script>